<template>
    <div class="box">
        <el-container>
            <el-header>
                <h3>韩立</h3>
                <div class="header-right">
                    <el-button :icon="Search" circle />
                    <el-button type="primary" :icon="Edit" circle />
                    <el-button type="success" :icon="Check" circle />
                    <el-button type="info" :icon="Message" circle />
                    <el-button type="warning" :icon="Star" circle />
                    <el-button type="danger" :icon="Delete" circle />
                </div>
                <div>
                    <el-button type="primary" @click="login">注册</el-button>
                    <el-button type="primary">登入</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside>
                    <div class="list">
                        <div><RouterLink to="/user"  class="list-item ">用户表格案例</RouterLink></div>
                        <div><RouterLink to="/TodoListTow" class="list-item">列表清单one</RouterLink></div>
                        <div><RouterLink to="/login"  class="list-item">登入注册案例</RouterLink></div>
                        <div><RouterLink to="/toList"  class="list-item">列表清单案例</RouterLink></div>
                        <div><RouterLink to="/shop"  class="list-item">购物车</RouterLink></div>
                        <div><RouterLink to="/from"  class="list-item">动态表单</RouterLink></div>
                    </div>
                </el-aside>
                <el-main>
                   <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
// <el-container>：外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列， 否则会水平左右排列。

// <el-header>：顶栏容器。

// <el-aside>：侧边栏容器。

// <el-main>：主要区域容器。

// <el-footer>：底栏容器。
import { RouterLink, RouterView } from 'vue-router';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

function login(){
router.push('/login')    
}
</script>

<style scoped>
.el-header {
    display: flex;
    width: 100%;
    height: 80px;
    background-color: rgb(0, 0, 0,0.5);
    justify-content: space-between;
    align-items: center;
}

.el-aside {
    width: 180px;
    height: 560px;
    padding-top: 10px;
    background-color: #d3ddce; 
    border: 1px solid black;

}

.el-main {
    width: 960px;
    height: 560px;
    background-color: antiquewhite
}
.list{
    width: 100%;
 
}
.list>div{
    text-align: left;
    height: 30px;
    line-height: 30px;
    /* background-color: pink; */
    cursor:  url('./assets/1.png'), auto;
    color: #303133;
}
.list>div:hover {
    background-color: #e1f3d8
}
.list-item {
  display: block;
  padding-left: 15px;
  text-decoration: none;
  color: #303133;
  transition: background-color 0.3s ease;
}
</style>